<div *ngIf="topicDrafts[0] !== undefined" class="card-wrapper">
  <mat-card class="topic-draft-header">
    <div class="topic-draft-header-wrapper">
      <span class="topic-draft-header-content">{{'topic-draft-list.column.submitted' | translate}}</span>
      <span class="topic-draft-header-content">{{'topic-draft-list.column.start' | translate}}</span>
      <span class="topic-draft-header-content">{{'topic-draft-list.column.name' | translate}}</span>
      <!--      <span class="topic-draft-header-status">Status</span>-->
    </div>
  </mat-card>
  <div *ngFor="let topicDraft of topicDrafts">
    <app-topic-draft-card (editedTopicDraftEvent)="updateEditedTopicDraft($event)"
                          (topicDraftDeletedEvent)="removeDeletedTopicDraft($event)"
                          [topicDraft]="topicDraft"></app-topic-draft-card>
  </div>
</div>
<div *ngIf="topicDrafts[0] === undefined" class="card-wrapper-info-area">
  <p>{{'topic-draft-list.no-new-topic-drafts' | translate}}</p>
</div>
